<template>
  <div class="delete">
    <mu-dialog 
      width="492" 
      :open.sync="deleteFile"  
      dialog-class="delete-dialog" 
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
      :overlay-close="false"
    >
      <div class="delete-dialog-header">
        <div class="title">确认删除</div>
        <img class="fork" src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG" @click="changeDeleteFile">
      </div>
      <div class="delete-dialog-tips">
        确认删除   
        <span v-html="tipsText"></span>
        吗？ 删除后无法找回。
      </div>
      <div class="delete-dialog-footer">
        <mu-button
          class="delete-dialog-cancel"
          color="#ffffff"
          round
          @click="changeDeleteFile"
        >
          取消
        </mu-button>
        <mu-button
          class="delete-dialog-next"
          color="#FF7632"
          round
          @click="del"
        >
          确认删除
        </mu-button>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deleteFile: false,
      tipsText: '“<strong>文件</strong>”'
    }
  },
  methods: {
    changeDeleteFile() {
      this.deleteFile = !this.deleteFile;
    },
    // 修改提示文字
    changeTipsText(text) {
      this.tipsText = text;
    },
    del() {
      // this.$emit("")
      console.log(this.$parent)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .delete-dialog {
  border-radius: 18px;

  .mu-dialog-body {
    padding: 30px;
  }

  .delete-dialog-header {
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;

    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .fork {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }
  .delete-dialog-tips {
    color: #333333;
  }


  .delete-dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
  }
  .delete-dialog-next {
    width: 120px;
    height: 30px;
    font-size: 12px;
    margin-left: 21px;
    box-shadow: none;
  }
  .delete-dialog-cancel {
    width: 120px;
    height: 30px ;
    font-size: 12px;
    color: #666666;
    border: 1px solid #666666;
    box-shadow: none;
  }
  .hover::before {
    display: none;
  }
}



</style>